<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>Title</title>
    <link rel="stylesheet" href="css/mui.css">
</head>
<body>
    <div id="app">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>用户名</label>
                <input v-model="form.username" type="text" class="mui-input-clear" placeholder="请输入用户名">
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input v-model="form.password" type="password" class="mui-input-password" placeholder="请输入密码">
            </div>
            <div class="mui-button-row">
                <button @click="login" type="button" class="mui-btn mui-btn-primary" >确认</button>
                <button type="button" class="mui-btn mui-btn-danger" >取消</button>
                <!--<div v-on:click="reset">重置</div>--><!--测试click方法在其他标签是否生效，可以-->
            </div>
        </form>
    </div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/mui.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            form:{
                username: '',
                password: ''
            }
        },
        methods:{
            login: function () {
                var _this = this;
                $.ajax({
                    url: '/user/login',
                    data:_this.form,
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        console.log(res)
                    },
                    error: function (res) {
                        console.log(res)
                    }
                });
            },
            reset: function () {
                this.form.username = '';
                this.form.password = '';
            }
        },
        mounted:function () {

        }
    });
</script>
</html>